<template>
  <a-modal
    :destroy-on-close="true"
    :mask-closable="false"
    :visible="visible"
    :title="title"
    :confirm-loading="loading"
    @cancel="handleClose"
    @ok="handleSubmit"
  >
    <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item label="上级分组" name="parentId">
        <a-tree-select
          v-model:value="formData.parentId"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="selectDataSource"
          placeholder="请选择上级分组"
          tree-default-expand-all
          allow-clear
        >
        </a-tree-select>
      </a-form-item>

      <a-form-item label="分组名称" name="groupName">
        <a-input v-model:value="formData.groupName" placeholder="请输入分组名称" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="formData.sort" :min="0" :max="99" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script name="AttachGroupEdit" lang="ts" setup>
import { getGroup, saveGroup, updateGroup } from "@/api/content/attachGroup";

const title = ref("");
const loading = ref(false);
const visible = ref(false);

const emit = defineEmits(["reload"]);
const selectDataSource = inject<any>("selectDataSource");
const formRef = ref();
const formData: any = reactive({
  groupId: undefined
});
const formRules = reactive({
  groupName: [{ required: true, trigger: "blur", message: "请输入分组名称" }]
});

const getAttachGroup = (id: number) => {
  loading.value = true;
  getGroup(id)
    .then(response => {
      Object.assign(formData, response.data);
      formData.parentId = response.data.parentId > 0 ? response.data.parentId : undefined;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleAdd = (parentId: number) => {
  title.value = "添加分组";
  Object.assign(formData, {
    groupId: undefined,
    parentId: parentId > 0 ? parentId : undefined,
    name: "",
    sort: 99
  });
  visible.value = true;
};

const handleEdit = (id: number) => {
  getAttachGroup(id);
  title.value = "编辑分组";
  visible.value = true;
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.groupId = 0;
  visible.value = false;
};

const handleSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      if (formData.groupId === undefined) {
        saveGroup(formData)
          .then(() => {
            antdMessage.success("添加成功");
            emit("reload");
            handleClose();
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        updateGroup(formData)
          .then(() => {
            antdMessage.success("编辑成功");
            emit("reload");
            handleClose();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    })
    .catch(error => {
      console.log("error", error);
    });
};

defineExpose({ handleAdd, handleEdit });
</script>
